<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户名/手机号</label>
        <el-input
          v-model="searchForm.userNameOrMobile"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">品牌车型:</label>
        <el-select v-model="brandId" placeholder="品牌" filterable>
          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-select v-model="carSeriesId" placeholder="车系" :disabled="brandId===''" filterable>
          <el-option v-for="item in carSeries" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-select v-model="modelYearId" placeholder="年款" :disabled="carSeriesId===''" filterable>
          <el-option v-for="item in carModels" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">报告时间</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="报告时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
        />
      </div>
      <div class="searchItem">
        <label for="">估价评分 :</label>
        <el-select v-model="grade" placeholder="所有评分" filterable>
          <el-option label="偏高" value="3" />
          <el-option label="适合" value="2" />
          <el-option label="偏低" value="1" />
          <el-option label="未评分" value="0" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button v-hasPermission="['valuation:search']" class="searchItembtn" type="primary" @click="search">
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">
      估价列表    <span style="font-weight:normal;margin-left:25rem;font-size:16px">估价评分 &nbsp;&nbsp;&nbsp;&nbsp;偏高:&nbsp;{{ totalObj.height || 0 }}&nbsp;&nbsp;&nbsp;&nbsp;  适合:&nbsp;{{ totalObj.fit || 0 }}&nbsp;&nbsp;&nbsp;&nbsp;  偏低:&nbsp;{{ totalObj.down || 0 }}&nbsp;&nbsp; &nbsp;&nbsp; 未评分:&nbsp;{{ totalObj.noScore || 0 }} </span>
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="序号"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        type="index"
        min-width="120px"
      />
      <el-table-column
        label="报告ID"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="报告时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名/手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>用户名:{{ scope.row.userName|| '-------' }}</span>
          <br>
          <span>手机号:{{ scope.row.mobile || '-------' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="品牌车型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.modelName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="市场车型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.salesdesc }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="上牌时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.regdate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="行驶里程(万公里)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.miles }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="卖车城市"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="初步估价(万元)"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="估价评分"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ['未评分','偏低','适合','偏高'][scope.row.grade] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      dateTime: '',
      brandId: '',
      carSeriesId: '',
      modelYearId: '',
      grade: '',
      searchForm: {
        userNameOrMobile: '',
        startTime: '',
        endTime: ''
      },
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false,
      tableKey: 0,
      list: [],
      brandList: [{
        'id': 520,
        'name': 'AC Schnitzer'
      },
      {
        'id': 595,
        'name': 'ALPINA'
      },
      {
        'id': 633,
        'name': 'ARCFOX'
      }],
      carSeries: [],
      carModels: [],
      totalObj: {}
    }
  },
  watch: {
    brandId(val, old) {
      if (val === '') return
      this.$get(`/web/carSeries/get/all?brandId=${val}&name=`).then(res => {
        if (res.data.code === '0') {
          this.carSeries = res.data.data
        }
      })
    },
    carSeriesId(val, old) {
      if (val === '') return
      this.$get(`/web/carModels/get/all?carSerialId=${val}&year=`).then(res => {
        if (res.data.code === '0') {
          this.carModels = res.data.data
        }
      })
    }
  },
  created() {
    this.searchForm.userNameOrMobile = this.$route.query.userNameOrMobile || ''
    this.search()
    this.brand()
    this.currentData()
    console.log(this.visitedViews)
  },
  methods: {
    currentData() {
      this.$get('/web/reportBase/getStatisticsByGrade').then(res => {
        if (res.data.code === '0') {
          this.totalObj = res.data.data
        }
      })
    },
    brand() {
      this.$get('/web/carBrands/get/all?name=').then(res => {
        console.log(res)
        this.brandList = res.data.data
      })
    },
    async search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      if (this.dateTime) {
        this.searchForm.startTime = `${this.dateTime[0]}  00:00`
        this.searchForm.endTime = `${this.dateTime[1]}  23:59`
      }
      this.loading = true
      try {
        // /webzlh/reportBase/list/report?userNameOrMobile=13008800250&pageNum=1&pageSize=20
        const result = await this.$get('/web/reportBase/list/report', { ...this.pagination, ...this.searchForm,
          brandId: this.brandId, carSeriesId: this.carSeriesId, modelYearId: this.modelYearId, grade: this.grade })
        if (result.data.code === '0') {
          this.loading = false
          console.log(result)
          this.list = result.data.data.rows
          this.total = result.data.data.total
        }
      } catch (error) {
        this.loading = false
      }
    },
    sortChange() {},
    reset() {
      this.searchForm = {}
      this.dateTime = ''
      this.brandId = ''
      this.modelYearId = ''
      this.carSeriesId = ''
      this.grade = ''
      this.search()
      this.brand()
    },
    view(row) {
      console.log(row)
    }
  }
}
</script>

<style>
</style>
